<template>
  <div class="container" :style="{ height: height }">
    <div class="title_container">
      <span class="title"></span>
      <span style="margin-left: 10px; font-size: 20px; color: #1cdbfe">
        智能设备告警记录</span
      >
    </div>
    <div class="table-demo-wrapper" :style="{ height: TableHeight }">
      <ul class="table-header">
        <li>
          <span>告警类型</span>
          <span>长者名称</span>
          <span>告警时间</span>
        </li>
      </ul>
      <Vue3SeamlessScroll
        :list="source"
        class="seamless-warp"
        v-model="allowScroll"
        :hover="hover"
        :limitScrollNum="9"
        :step="1"
      >
        <ul class="list">
          <li
            :class="{ devicelistitem: true, even: index % 2 !== 0 }"
            v-for="(item, index) in source"
            :key="index"
          >
            <span :title="item.name">{{ item.deviceType }}</span>
            <span :title="item.sex">{{ item.elderName }}</span>
            <span :title="item.address">{{ item.alertTime }}</span>
          </li>
        </ul>
      </Vue3SeamlessScroll>
    </div>
  </div>
</template>
<script>
import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
import { getAlertRecordList } from '@/api/dataScreen/index';
export default {
  components: {
    Vue3SeamlessScroll,
  },
  data() {
    return {
      allowScroll: true,
      source: [],
      hover: true,
      height: "390px",
      TableHeight: '320px',
    };
  },

  mounted() {
    this.initData();
  },
  props: {
    isFullscreen: {
      type: Boolean,
      default: false,
    },
  },
  // watch: {
  //   isFullscreen: {
  //     handler(newValue, oldValue) {
  //       if (newValue == true) {
  //         this.height = '430px';
  //         this.TableHeight = '360px';
  //       } else {
  //         this.height = '390px';
  //         this.TableHeight = '320px';
  //       }
  //     },
  //   },
  // },
  methods: {
    initData() {
      getAlertRecordList().then((res) => {
        this.source = res.alertRecordList
      });
    },
  },
};
</script>
<style scoped lang="scss">
.container {
  //height: 390px;
  padding: 10px 20px;
  //background: #06073B;
  border-radius: 7px;
  box-shadow: rgb(8, 79, 160) 0px 0px 40px inset;
  border: 2px solid rgb(8, 79, 160);
  background-color: transparent;
  .title_container {
    display: flex;
    align-items: center;
    .title {
      width: 13px;
      height: 27px;
      background: #1cdbfe;
      border-radius: 6px;
      display: inline-block;
    }
  }

  .table-demo-wrapper {
    width: 100%;
    //height: 320px;
    box-sizing: border-box;
    //padding: 0px 10px 0 0;
    overflow: hidden;
    margin-top: 10px;
    border-radius: 7px;
    border: 2px solid #084fa0;

    .table-header {
      //margin-top: 5px;
      background: rgba(14, 30, 109, 0.5);
      li {
        height: 28px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding-left: 10px;
        span {
          line-height: 28px;
          flex: 1;
          font-size: 14px;
          font-family: FZZhengHeiS-M-GB;
          font-weight: 400;
          color: #00a3f8;
          text-align: left;
          &:nth-child(1) {
            flex: 2;
          }
          &:nth-child(2) {
            flex: 1;
            text-align: center;
          }
          &:nth-child(3) {
            flex: 2;
            text-align: center;
          }
        }
      }
    }
    .seamless-warp {
      overflow: hidden;
      .devicelistitem {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        height: 30px;
        padding-left: 10px;
        cursor: pointer;
        span {
          flex: 1;
          font-size: 14px;
          font-family: PingFang SC;
          font-weight: 400;
          color: #d7def5;
          text-align: left;
          &:nth-child(1) {
            flex: 2;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          &:nth-child(2) {
            flex: 1;
            text-align: center;
          }
          &:nth-child(3) {
            flex: 2;
            text-align: center;
          }
        }
      }
    }
    .even {
      background: rgba(14, 30, 109, 0.5);
    }
  }
}
</style>
